<template>
	<view class="container">
		<view class="logo">
			<image src="/static/home/1.png" mode="" class="logo_img"></image>
		</view>
		<view class="banner">
			<image src="/static/home/3.jpg" mode="" class="banner_img"></image>
		</view>
		<view class="notice">
			<view class="icon">
				<image src="/static/home/7.jpg" mode="" class="icon_img"></image>
			</view>
			<view class="profile_picture">
				<image src="https://www.zmtc.com/wp-content/uploads/2024/01/7-5.jpg" mode=""
					class="profile_picture_img"></image>
			</view>
			<view class="nick_name">
				昵称
			</view>
			<view class="msg">
				给朋友赠送了半年卡
			</view>
			<view class="time">
				1天前
			</view>
		</view>
		<view class="chooseGift">
			<view class="chooseGift_top">
				<view class="title">
					选购礼物
				</view>
				<view class="tip">
					为重要的TA选择适合TA的礼物
				</view>
			</view>
			<view class="line">

			</view>
			<view class="card_box">
				<view class="card " :class="choseCard==1?'active':''" @click="choseCard=0">
					6次卡
				</view>
				<view class="card" :class="choseCard==0?'active':''" @click="choseCard=1">
					12次卡
				</view>
			</view>
		</view>
		<view class="gift" @click="gotoGiftDetails">
			<view class="" style="margin-left: 428rpx;">
				<view class="title">
					限量发售
				</view>
				<view class="count">
					{{choseCard==0?'6':'12'}}次卡
				</view>
				<view class="btn">
					<view class="price">
						￥320
					</view>
					<view class="buy_btn">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				choseCard: 0
			}
		},
		async onLoad() {
			const token = wx.getStorageSync('token')
			console.log('🔐 无 token，正在微信登录中...')
			wx.login({
				success(res) {
					if (res.code) {
						console.log('获取code成功:', res.code)
					}
				}
			})
			if (token) {
				console.log('✅ 已缓存 token:', token)
				// TODO: 可选择校验 token 有效性（如调用鉴权接口）
			} else {
				console.log('🔐 无 token，正在微信登录中...')
				wx.login({
					async success(result) {
						if (result.code) {
							console.log('获取code成功:', result.code)
							try {
								const res = await request({
									url: '/api/user/login/wechat',
									method: 'POST',
									header: {
										'Content-Type': 'application/json'
									},
									data: {
										code: result.code // 注意：你的 code 来源于 wx.login()
									}
								});
								console.log(res, 'res');
								const token = res.data.token;
								uni.setStorageSync('token', token);
								console.log('🎉 登录成功，已缓存 token:', token);

							} catch (error) {
								uni.showToast({
									title: '请求失败',
									icon: 'none'
								});
								console.error('❌ 登录失败:', error);
							}
						} else {
							console.error('登录失败！', res.errMsg)
						}
					},
					fail() {
						wx.showToast({
							title: '微信登录失败',
							icon: 'none'
						})
					}
				})
			}
		},

		methods: {
			gotoGiftDetails() {
				uni.navigateTo({
					url: "/pagesA/giftDetails/giftDetails"
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		width: 100%;
		overflow: hidden;
		background-color: black;
		background-image: url();
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.logo {
		margin-top: 70rpx;
		margin-left: 23rpx;
		margin-bottom: 50rpx;

		.logo_img {
			width: 255rpx;
			height: 61rpx;
		}
	}

	.banner {
		width: 710rpx;
		height: 501rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin: auto;
		margin-bottom: 30rpx;

		.banner_img {
			width: 710rpx;
			height: 501rpx;
		}
	}

	.notice {
		display: flex;
		align-items: center;
		width: 710rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: auto;
		margin-bottom: 65rpx;

		.icon {
			margin-left: 26rpx;

			.icon_img {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.profile_picture {
			margin-left: 28rpx;

			.profile_picture_img {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}
		}

		.nick_name {
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #141212;
			line-height: 36rpx;
			margin-left: 12rpx;
		}

		.msg {
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #5D5D5D;
			line-height: 36rpx;
			margin-left: 28rpx;
		}

		.time {
			margin-left: 110rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #9F9F9F;
			line-height: 36rpx;
		}
	}

	.chooseGift {
		margin: auto;
		margin-bottom: 44rpx;
		display: flex;
		flex-direction: column;
		width: 710rpx;

		.chooseGift_top {
			display: flex;

			.title {
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
			}

			.tip {
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				margin: 13rpx 0 0 13rpx;
			}
		}

		.line {
			width: 710rpx;
			height: 3rpx;
			background: #745A94;
			margin-top: 27rpx;
			margin-bottom: 44rpx;
		}

		.card_box {
			display: flex;

			.card {
				width: 209rpx;
				height: 67rpx;
				border-radius: 12rpx;
				text-align: center;
				align-items: center;
				background-color: white;
				line-height: 67rpx;
				margin-right: 13rpx;
			}

			.active {
				background-color: #251837;
				color: white;
			}
		}
	}

	.gift {
		display: flex;
		flex-direction: column;
		background-image: url("/static/home/9.jpg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 710rpx;
		height: 250rpx;
		margin: 0 auto;

		.title {
			margin-top: 50rpx;
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}

		.count {
			margin-top: 10rpx;
			margin-bottom: 30rpx;
			font-family: AliHYAiHei;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.btn {
			display: flex;

			.price {
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-right: 14rpx;
			}

			.buy_btn {
				border-radius: 22rpx;
				border: 1px solid white;
				padding: 10rpx 20rpx;
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}
	}
</style>